<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当网</title>
</head>
<style>
    li{
        list-style-type:none;
        color:rgba(0, 0, 0, 0.562);
        background-color: #c3eeff;
        width: 150px;
        text-align: center;
        float: left;
        line-height: 40px;
        position:relative;
        left:700px;
    }

    li2{
        list-style-type: none;
        background-color: rgb(255, 123, 0);
        color:white;
        width:90px;
        text-align: center;
        float:left;
        line-height: 60px;
        position:relative;
        top:80px;
        right:630px;
    }

    li3{
        list-style-type: none;
        background-color: rgb(255, 123, 0);
        color:white;
        width:90px;
        text-align: center;
        float:left;
        line-height: 60px;
        position:relative;
        top:20px;
        left:500px;

    }
    
    .discount{
        position: relative;
        top:20px;
        left:800px;
    }
    .logo{
        position: relative;
        left:20px;
        top:20px;
    }
    .banner{
        position: relative;
        top:30px;
        right: 30px;
    }
    /* z轴的使用调整“图书畅销榜”和“边界”的上下关系*/
    .bg_bang{
        position: relative;
        right:5px;
        top:90px;
        z-index: 2;

    }
    .book1{
        position: relative;
        top: -300px;
        left:50px;
        z-index: 3;
    }
    .book1Tag{
        position: relative;
        top: -570px;
        left:60px;
        z-index: 3;
    }
    .border{
        border-width: 2px;
        border-color: greenyellow;
        border-style: solid;
        width:device-width;
        height: 400px;
        position: relative;
        top:15px;
        left:10px;
        z-index: 1;
    }
    .note1{
        color: rgb(26, 80, 196);
        position: relative;
        z-index: 3;
        left: 350px;
        top:-630px;
    }
    .red1{
        color:red;
        font-weight: bold;
    }
    .blue1{
        color:rgb(0, 217, 255);

    }
    .info1{
        color:black;
        z-index: 3;
        top:-20px;
        position: relative;

    }
    .info2{
        color:black;
        z-index: 3;
        top:-30px;
        position: relative;
    }
    .book2{
        position: relative;
        left: 750px;
        top:-860px;
    }
    .book2Tag{
        position: relative;
        top: -970px;
        left:750px;
        z-index: 3;
    }
    .note2{
        color: rgb(26, 80, 196);
        position: relative;
        z-index: 3;
        left:850px;
        top:-1030px;
    }
    .book3{
        position: relative;
        left: 750px;
        top:-1060px;
    }
    .book3Tag{
        position: relative;
        top: -1170px;
        left:750px;
        z-index: 3;
    }
    .note3{
        color: rgb(26, 80, 196);
        position: relative;
        z-index: 3;
        left:850px;
        top:-1220px;
    }
    .info3{
        color:black;
        z-index: 3;
        top:-30px;
        position: relative;
    }
    .foot{
        color:gray;
        position: relative;
        top:-1200px;
        left: 300px;
    }
    .grey{
        position: relative;
        top:-20px;
    }
</style>
<body>
    <div class="logo">
        <img src= "image/logo.jpg">
    </div>

    <div class= "discount">
        <img src="image/icon_count.png">
    </div>

    <ul>
        <li>尾品汇</li>
        <li>当当优品</li>
        <li>数字馆</li>
        <li>查看问题</li>
    </ul>

    <ul>
        <li2>首页</li2>
        <li2>图书</li2>
        <li2>音像</li2>
        <li2>童装</li2>
        <li2>服装</li2>
        <li2>鞋靴</li2>
        <li2>运动</li2>
        <li2>箱包</li2>
        <li2>美妆</li2>
        <li2>珠宝</li2>
        <!-- <li2>家居</li2>
        <li2>食品</li2>
        <li2>餐</li2>
        <li2>手机</li2>
        <li2>数码</li2>
        <li2>电脑</li2>
        <li2>家电</li2> -->
    </ul>

    <ul>
        <li3>家居</li3>
        <li3>食品</li3>
        <li3>餐</li3>
        <li3>手机</li3>
        <li3>数码</li3>
        <li3>电脑</li3>
        <li3>家电</li3>

        <div class = "banner">
            <img 
            src = "image/banner.png"
            width ="100%">
        </div>
    </ul>

    <div class="bg_bang">
        <img src="image/bg_bang.gif">
    </div>

    <div class = "border"> </div>
<!-- 第一本书 -->
    <div class = "book1">
        <img src ="image/book-01.jpg">
    </div>
    <div class="book1Tag">
        <img src ="image/bookNo1.gif">
    </div>
    <div class="note1">
        <h3>偷影子的人</h3>
        <div class ="info1">
        <br>作者：[法]马克·李维(Marc Levy)著
        <br>出版社：湖南文艺出版社
        <br>当当价:<span class ="red1">￥17.9</span>
        <br>不知道姓氏的克蕾尔。这就是你在我生命里的角色，
        <br>我童年时的小女孩，今日蜕变成了女人，一段青梅竹
        <br>马的回忆，一个时间之神没有应允的愿望。一个老
        <br>是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊
        <br>能力而强大:他能“偷别人的影子”
        </div>
    </div>
<!-- 第二本书 -->
    <div class = "book2">
        <img src ="image/book-02.jpg">
    </div>
    <div class="book2Tag">
        <img src ="image/bookNo2.gif">
    </div>
    <div class="note2">
        <h3>看见(知名央视记者、央视主持人柴静：十年个人
        <br>成长的告白，中国社会变迁的备忘
        </h3>
        <div class="info2">
        <br>作&nbsp;者：柴静&nbsp;著
        <br>出版社:广西师范大学出版社
        <br><span class ="red1">￥29.40</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class ="blue1">7.4折</span>
        </div>
    </div>
    <!-- 第三本书 -->
    <div class = "book3">
        <img src ="image/book-03.jpg">
    </div>
    <div class="book3Tag">
        <img src ="image/bookNo3.gif">
    </div>
    <div class="note3">
        <h3>改变孩子先改变自己</h3>
        <div class="info3">
        <br>作&nbsp;者:贾容韬&nbsp;贾毅&nbsp;著
        <br>出版社: 作家出版社
        <br><span class ="red1">￥22.20</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class ="blue1">7.4折</span>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="foot">
        <br><span class = "grey">&nbsp;(C)当当网2004-2017,All Rights Reserved</span>
        <img src ="image/validate.gif">
        <span class = "grey">京ICP证041189号出版物经营许可证&nbsp;新出发京批字第直0673号</span>
    </div>
</body>
</html>